body, html {
  height: 100%;
  margin: 0;
  background-color:black;
}

.bg {
  /* The image used */
  background-image: url("/staticfiles/imgs/kaede-1-bg.png");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-name: opt;
  animation-duration: 2s;
  animation-delay: 3s; 
}

/* Position text in the middle of the page/image */
.bg-text {
    opacity: 0;
    font-family: FangSong;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    font-size: 50px;
    border: 10px solid #f1f1f1;
    position: fixed; /* Stay fixed */
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: 15px;
    text-align: center;
    animation-fill-mode: forwards;
    animation-name: opt;
    animation-duration: 1.5s;
    animation-delay: 5s;
  }

.signature {
    transform: scale(0.5) translate(-50%, -50%);
    position: fixed; /* Stay fixed */
    z-index: 3;
    left: 60%;

    /* transition: visibility 0s, opacity 0.5s linear;  */
    animation-fill-mode: forwards;
    animation-name: example;
    animation-duration: 3s;
}


@keyframes example{
    0% {top:70%;}
    90% {top:20%; opacity: 0.3;}
    100% {top:10%; opacity:0.1; visibility: hidden;}
    /**/
}

@keyframes opt{
    0% {opacity: 0;}
    75% {opacity: 0.75;}
    100% {opacity: 1;}
}

.console {
  color: #f1f1f1;
  text-align: center;
}

.contact {
  font-family: FangSong;
  text-align: center;
  color: white;
}

a {
  color: antiquewhite;
}